<script setup>
    import {ref, reactive, toRefs} from 'vue'
	let age = ref(18)
    //let car = {brand: '奔驰', price: 200}
    let car = reactive({brand: '奔驰', price: 200})
	function changeAge() {
		age.value++;
    }
    function changeCarPrice() {
        car.price += 100
		console.log(car)
	}
    function changeCar() {
		//car = {brand:'奥拓',price:1} //这么写页面不更新的
		//car = reactive({brand:'奥拓',price:1}) //这么写页面不更新的
		Object.assign(car, {brand:'奥拓',price:1})
		console.log(car)
    }

    let person = reactive({name:'张三', age:18, gender:'男'})
    // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
	//let {name, gender} = person
	let {name, gender} = toRefs(person)
</script>

<template>
	<div class="person">
		<h2>年龄：{{age}}</h2>
		<h2>汽车信息：一台{{car.brand}}，价格{{car.price}}</h2>
		<button @click="changeAge">改变年龄</button>
		<button @click="changeCarPrice">改变价格</button>
		<button @click="changeCar">改变Car</button>
	</div>
</template>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>